<template>
  <div class="gl_contentBox gl_heightFull">
    <div class="gl_mb_5 demo-input-suffix gl_searchBox">
      <el-row :gutter="20">
        <el-col :span="4">
          <p class="gl_mb_10">礼物名称</p>
          <el-input v-model="selectedMsg.Filter" placeholder="输入姓名查询" size="mini" clearable @change="getPageList()" />
        </el-col>
        <el-col :span="6">
          <p class="gl_mb_10">创建时间</p>
          <el-date-picker
            v-model="datetimerange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 100%;"
            size="mini"
            @change="handleTimeChange"
          />
        </el-col>
        <el-col :span="14" style="text-align:right">
          <el-button style="margin-top:27px" type="primary" size="mini" @click="confirmEntry()">查询</el-button>
          <el-button style="margin-top:27px" type="warning" size="mini" @click="resetData">重置</el-button>
        </el-col>
      </el-row>
    </div>

    <div class="gl_margin_10">
      <el-button class="gl_ml_10" type="primary" size="medium" icon="el-icon-circle-plus-outline" @click="addGift">添加礼物</el-button>
      <el-button class="gl_ml_10" type="warning" size="medium" icon="el-icon-circle-plus-outline" @click="addRules">添加规则</el-button>
    </div>

    <el-table v-loading="loading" size="mini" :data="tableData" class="gl_table_noBorder mb_17" style="width: 100%" @sort-change="sortChange">
      <el-table-column label="序号" type="index" :index="table_index" />
      <el-table-column label="图片">
        <template slot-scope="{ row }">
          <div class="gl_clear gl_my_5">
            <div class="gl_mr_10 gl_fl" style="height:60px">
              <img class="table_photo" :src="getStaticFileUrl(row.giftUrl)">
            </div>
            <div class="table_name gl_fl">
              <div>{{ row.name }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="礼物价格" sortable="custom">
        <template slot-scope="{ row }">
          {{ row.price || row.price === 0 ? '￥' + row.price/100 : '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="heat" label="热度">
        <template slot-scope="{ row }">
          {{ row.heat }}热度/个
        </template>
      </el-table-column>
      <el-table-column prop="creatorName" label="创建人" />
      <el-table-column label="创建时间" width="200">
        <template slot-scope="{row}">
          <span v-if="row.creationTime">
            {{ row.creationTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column width="180" label="操作">
        <template slot-scope="{ row }">
          <el-button size="mini" type="text" @click="clickEidt(row)">编辑</el-button>
          <el-button size="mini" type="text" @click="clickDelete(row)"><span class="gl_color_error">删除</span></el-button>
        </template>
      </el-table-column>
    </el-table>

    <add-gift ref="addgiftRef" />
    <add-rule ref="addruleRef" />

    <!-- 分页 -->
    <el-row style="text-align: right;">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="selectedMsg.MaxResultCount"
        :current-page="selectedMsg.Page"
        @size-change="changePageSize"
        @current-change="changePage"
      />
    </el-row>
  </div>
</template>

<script>
import addGift from './addGift';
import addRule from './addRule';
import { api_GET_EventsManagementGift, api_GET_EventsManagementGiftId, api_DELETE_EventsManagementGiftId } from '@/extend/api/gameswaggerApi/app';
import { Api_GET_EventsManagementGiftQO } from '@/lib/form/game/swaggerForm';
export default {
  components: { addGift, addRule },
  data() {
    return {
      loading: false,
      levelList: [],
      selectedMsg: new Api_GET_EventsManagementGiftQO(),
      tableData: [],
      total: 1,
      selectData: [],
      datetimerange: []
    };
  },
  mounted() {
    this.getPageList();
  },
  methods: {
    getPageList (page) {
      this.selectedMsg.Page = page || 1;
      this.selectedMsg.SkipCount = (this.selectedMsg.Page - 1) * this.selectedMsg.MaxResultCount;
      this.loading = true;
      api_GET_EventsManagementGift(this.selectedMsg).then(res => {
        this.loading = false;
        this.total = res.totalCount;
        this.tableData = res.items || [];
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    clickDelete (row) {
      const msg = this.total === 1 ? '礼物至少保留一个，人气榜功能才会存在，您确定要删除最后一个礼物吗？' : '您确定要删除吗？';
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          api_DELETE_EventsManagementGiftId(row.id).then(res => {
            this.$message({ type: 'success', message: '删除成功' });
            this.getPageList();
          }, error => {
            const _msg = error.error.message || error.message;
            this.$message({ type: 'error', message: _msg });
          });
        })
        .catch(() => {});
    },
    clickEidt (row) {
      this.$refs.addgiftRef.giftDialogVisible = true;
      this.$refs.addgiftRef.isEdit = true;
      this.$refs.addgiftRef.loading = true;
      api_GET_EventsManagementGiftId(row.id).then(res => {
        if (res) {
          res.price = res.price / 100;
          this.$refs.addgiftRef.selectedMsg = res;
          this.$refs.addgiftRef.loading = false;
        }
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    table_index(index) {
      return (this.selectedMsg.Page - 1) * this.selectedMsg.MaxResultCount + index + 1;
    },
    // 获取静态图片
    getStaticFileUrl(relativeUrl) {
      if (relativeUrl) {
        return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
      } else {
        return require('@/assets/images/face_default.png');
      }
    },
    // 分页
    changePage(page) {
      this.getPageList(page);
    },
    changePageSize(pagesize) {
      this.selectedMsg.MaxResultCount = pagesize;
      this.getPageList();
    },
    handleTimeChange(time) {
      if (time) {
        this.selectedMsg.CreationStarTime = time[0] + 'T00:00:00';
        this.selectedMsg.CreationEndTime = time[1] + 'T23:59:59';
      } else {
        this.selectedMsg.CreationStarTime = '';
        this.selectedMsg.CreationEndTime = '';
      }
    },
    resetData() {
      this.selectedMsg = new Api_GET_EventsManagementGiftQO();
      this.datetimerange = [];
      this.getPageList();
    },
    confirmEntry() {
      this.getPageList();
    },
    addGift() {
      this.$refs.addgiftRef.giftDialogVisible = true;
      this.$refs.addgiftRef.isEdit = false;
      this.$refs.addgiftRef.selectedMsg.price = '';
      this.$refs.addgiftRef.selectedMsg.heat = '';
    },
    addRules() {
      this.$refs.addruleRef.ruleDialogVisible = true;
      this.$refs.addruleRef.getList();
    },
    // 价格、库存排序
    sortChange (val) {
      console.log(val);
      // 升序："Price ASC"，倒序："Price DESC"
      if (val.column.label === '礼物价格' && val.order === 'ascending') {
        this.selectedMsg.Sorting = 'Price ASC';
      } else if (val.column.label === '礼物价格' && val.order === 'descending') {
        this.selectedMsg.Sorting = 'Price DESC';
      } else {
        this.selectedMsg.Sorting = '';
      }
      this.getPageList(this.selectedMsg.Page);
    }
  }
};
</script>

<style lang="scss" scoped>
  .table_photo {
    width: 60px;
    height: 60px;
    border-radius: 6px
  }
  .table_name {
    line-height: 60px;
  }
  .mb_17 {
    margin-bottom: 17px;
  }
  .timeTitle {
    display: inline-block;
    height: 18px;
    font-size: 14px;
    line-height: 18px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 500;
  }
  .queryResult {
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
  }
</style>
